<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <!-- 插入到left插槽位置 -->
        <template #left>
          <span>总共{{ total }}条</span>
        </template>
        <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/employees/import')">导入excel</el-button>
          <el-button v-allow="'export_excel'" type="danger" size="small" @click="handleDownload">导出excel</el-button>
          <el-button type="primary" size="small" @click="showDialog=true">新增员工</el-button>
        </template>
      </page-tools>
      <el-card style="margin-top: 10px;">
        <el-table border :data="list">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像">
            <template v-slot="{row}">
              <image-holder :src="row.staffPhoto" />
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template v-slot="{row}">
              {{ formatEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable />
          <el-table-column label="操作" width="280">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="$router.push('/employees/detail/' + row.id)">查看</el-button>
              <el-button type="text" size="small" @click="hAssignRole(row)">分配角色</el-button>
              <el-button type="text" size="small" @click="hDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="total, sizes,prev, pager, next, jumper"
            :total="total"
            :current-page="q.page"
            :page-size="q.size"
            :page-sizes="[2,5,10]"
            @current-change="hCurrentChange"
            @size-change="hSizeChange"
          />
        </el-row>
      </el-card>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="showDialog"
      width="35%"
      @close="$refs.empSon.resetForm()"
    >
      <emp-dialog ref="empSon" @close="hClose" />
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="showRoles"
      width="35%"
    >
      <assign-role v-if="showRoles" :id="id" @close="showRoles=false" />
    </el-dialog>
  </div>
</template>

<script>
import employees from '@/constant/employees'
import { getEmployee, delEmployee } from '@/api/employees'
import empDialog from './empDialog.vue'
import AssignRole from './assignRole.vue'
const hireTypeMap = {}
employees.hireType.forEach(item => {
  hireTypeMap[item.id] = item.value
})
export default {
  components: { empDialog, AssignRole },
  data() {
    return {
      q: {
        page: 1,
        size: 2
      },
      list: [],
      total: 0,
      showDialog: false,
      showRoles: false,
      id: ''
    }
  },
  created() {
    this.loadEmployees()
  },
  methods: {
    async loadEmployees() {
      try {
        const res = await getEmployee(this.q)
        // console.log(res)
        this.total = res.data.total
        this.list = res.data.rows
      } catch (e) { this.$message.error(e.message) }
    },
    formatEmployment(num) {
      return hireTypeMap[num]
    },
    async hDel(id) {
      try {
        await this.$confirm('真的要删除吗', '提示', { type: 'warning' })
        const res = await delEmployee(id)
        console.log(res)
        this.$message.success(res.message)
        if (this.list.length === 1 && this.q.page > 1) this.q.page--
        this.loadEmployees()
      } catch (e) {
        // console.log(e)
        if (e === 'cancel') return
        this.message.error(e.message)
      }
    },
    hCurrentChange(val) {
      this.q.page = val
      this.loadEmployees()
    },
    hSizeChange(val) {
      this.q.size = val
      this.loadEmployees()
    },
    hClose() {
      this.showDialog = false
      this.loadEmployees()
    },
    async handleDownload() {
      import('@/vendor/Export2Excel.js').then(async excel => {
        const res = await getEmployee({ page: 1, size: this.total })
        console.log(res)
        const list = res.data.rows
        const map = {
          'id': '编号',
          'password': '密码',
          'mobile': '手机号',
          'username': '姓名',
          'timeOfEntry': '入职日期',
          'formOfEmployment': '聘用形式',
          'correctionTime': '转正日期',
          'workNumber': '工号',
          'departmentName': '部门',
          'staffPhoto': '头像地址'
        }
        const header = Object.keys(list[0]).map(key => map[key])
        const data = list.map(item => {
          item['formOfEmployment'] = hireTypeMap[item['formOfEmployment']]
          return Object.values(item)
        })
        console.log(header, data)
        excel.export_json_to_excel({
          header,
          data,
          filename: 'excel-list',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },
    hAssignRole({ id }) {
      // console.log(id)
      this.showRoles = true
      this.id = id
    }
  }
}
</script>
<style scoped lang='scss'>
.avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>

